<template>
 <div>
   <!-- <div class="top">
     <img src="@/assets/mine.png" alt="">
   </div> -->
    <div class="top">
     <img src="@/assets/images/home/header/header-bg.png" alt="" style="width: 100%; height: 70px">
     <div class="person">
       <div class="headImg" style="display: inline-block">
         <van-image
          round
          width="3rem"
          height="3rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
       </div>
       <div class="personMsg" style="display: inline-block">
         <div class="name" style="font-weight: bolder; font-size: 17px;display: inline-block">李某某</div>
         <div style="display: inline-block; position: relative; top: 3px; left: 5px"><van-icon name="qr" size="16" @click="showPopup"/></div>
         <van-popup v-model="show">
           <img src="@/assets/code.png" alt="">
         </van-popup>
         <div class="num" style="font-size: 13px; color: orange">178******121</div>
       </div>
       <van-row>
        <van-col span="8"><div class="title">消息</div></van-col>
        <van-col span="8"><div class="title">认证</div></van-col>
        <van-col span="8"><div class="title">积分</div></van-col>

      </van-row>
     </div>
   </div>
    <van-collapse class="codemodule" v-model="activeCode">
     <van-collapse-item class="van-collapse-item" name="2" icon="card">
        <template #title>
      <div style="padding-left:20px">电子健康通行码</div>
      </template>
     </van-collapse-item>
    </van-collapse>
    <div class="itemList" align="center">
      <van-row type="flex" justify="space-around">
        <van-col span="8" v-for="(item,key) in typeList" :key="key" class="item">
        <van-image class="itemImg" :src="item.image" round width="3rem" height="3rem"/>
        <div class="title">{{item.title}}</div>
        </van-col>
    </van-row>
    </div>
    </div>
</template>

<script>

export default {
  name: 'Mine',
  data () {
    return {
      typeList: [
        {
          title: '信用积分',
          image: require('@/assets/mine/1-jf.png')
        },
        {
          title: '我的情报',
          image: require('@/assets/mine/2-wdqb.png')
        },
        {
          title: '我的收藏',
          image: require('@/assets/mine/3-wdsc.png')
        },
        {
          title: '我的订阅',
          image: require('@/assets/mine/4-wddy.png')
        },
        {
          title: '意见反馈',
          image: require('@/assets/mine/5-yjfk.png')
        },
        {
          title: '关于寿光云',
          image: require('@/assets/mine/6-sgy.png')
        },
        {
          title: '设置',
          image: require('@/assets/mine/7-shezhi.png')
        },
        {
          title: '我要答题',
          image: require('@/assets/mine/8-dati.png')
        },
        {
          title: '我要预约',
          image: require('@/assets/mine/9-yuyue.png')
        },
        {
          title: '我要挂号',
          image: require('@/assets/mine/10-guahao.png')
        },
        {
          title: '我要投票',
          image: require('@/assets/mine/11-toupiao.png')
        },
        {
          title: '便民服务',
          image: require('@/assets/mine/12-pianmin.png')
        }
      ],
      activeCode: ['1'],
      show: false,
    }
  },
  methods: {
     showPopup() {
      this.show = true;
    }
  },
}
</script>

<style lang="scss" scoped>
.headImg {
  margin-left: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.person{
  height: 110px;
    margin-left: 10px;
    margin-right: 10px;
    -moz-box-shadow:1px 1px 5px rgb(220, 221, 221);
    -webkit-box-shadow:1px 1px 5px rgb(220, 221, 221);
    box-shadow:1px 1px 5px rgb(220, 221, 221);
}
.van-collapse-item{
  -moz-box-shadow:1px 1px 5px rgb(220, 221, 221);
    -webkit-box-shadow:1px 1px 5px rgb(220, 221, 221);
    box-shadow:1px 1px 5px rgb(220, 221, 221);
}
.personMsg{
  padding-left: 10px;
  position: relative;
  top: -8px
}
// .top img {
//   width: 100%;
//   margin: 0 auto;
// }
.top {
  padding-bottom: 30px;
}
.codemodule {
  width: 350px;
  margin: 20px auto;
  margin-top: 0;
}
.item {
  padding-top: 20px;
}
.title {
  font-size: 13.5px;
  padding-top: 6px;
  text-align: center;
}
.itemList {
  padding-bottom: 60px;
}
</style>
